<!-- 编制总结 -->
<template>
  <div class="padding-sp">
    <div v-for="(plan, planIndex) in list" :key="planIndex">
      <div class="title">{{ plan.title }}</div>
      <el-table :data="plan.list" border style="width: 100%">
        <el-table-column v-for="(item, index) in plan.tableDataTitle" :key="index" :label="item.label" :prop="item.prop" header-align="center" :width="item.width ? item.width : null" :align="item.align ? item.align : null" :fixed="item.fixed ? item.fixed : null">
          <template slot-scope="scope">
            <div v-if="item.prop === 'thisYearPlanIncome'">
              <span>{{ scope.row.thisYearPlanIncome | moneyFilter }}</span>
            </div>
            <div v-else-if="item.prop === 'compareLastYearPlanIncome'">
              <span :class="getColor(plan.type,scope.row.compareLastYearPlanIncome >= 0)">{{ scope.row.compareLastYearPlanIncome >= 0 ? '增加' : '减少' }}</span>
              <span :class="getColor(plan.type,scope.row.compareLastYearPlanIncome >= 0)">{{ scope.row.compareLastYearPlanIncome | moneyFilter }}元</span>
            </div>
            <div v-else-if="item.prop === 'compareLastYearPlanIncomeRatio'">
              <span :class="getColor(plan.type,scope.row.compareLastYearPlanIncomeRatio >= 0)">{{ scope.row.compareLastYearPlanIncomeRatio >= 0 ? '增加' : '减少' }}</span>
              <span :class="getColor(plan.type,scope.row.compareLastYearPlanIncomeRatio >= 0)">{{ scope.row.compareLastYearPlanIncomeRatio | percentageFilter }}</span>
            </div>
            <div v-else-if="item.prop === 'compareLastYearRealityIncome'">
              <span :class="getColor(plan.type,scope.row.compareLastYearRealityIncome >= 0)">{{ scope.row.compareLastYearRealityIncome >= 0 ? '增加' : '减少' }}</span>
              <span :class="getColor(plan.type,scope.row.compareLastYearRealityIncome >= 0)">{{ scope.row.compareLastYearRealityIncome | moneyFilter }}</span>
            </div>
            <div v-else-if="item.prop === 'compareLastYearRealityIncomeRatio'">
              <span :class="getColor(plan.type,scope.row.compareLastYearRealityIncomeRatio >= 0)">{{ scope.row.compareLastYearRealityIncomeRatio >= 0 ? '增加' : '减少' }}</span>
              <span :class="getColor(plan.type,scope.row.compareLastYearRealityIncomeRatio >= 0)">{{ scope.row.compareLastYearRealityIncomeRatio | percentageFilter }}</span>
            </div>
            <div v-else>
              <span>{{ scope.row[item.prop] }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import Api from '../../api/incomeAndExpenditurePlan';
  export default {
    data() {
      return {
        list: [],
      };
    },
    mounted() {
      this.getList();
    },
    methods: {
      //数据源
      async getList() {
        let res = await Api['prepareTheSummary']({
          planKey: this.$route.query.planKey,
          year: this.planDetail.planYear,
        });
        if (res && res.success) {
          this.list = [];
          this.setList(res.incomeSummarizeDto, 'income');
          this.setList(res.expendSummarizeDto, 'expend');
          this.setList(res.nonOptIncomeSummarizeDto, 'income');
          this.setList(res.nonOptExpendSummarizeDto, 'expend');
          // res.expendSummarizeDto.forEach(item => {
          //   if (item.incomeOrExpendDetailDtos && item.incomeOrExpendDetailDtos.length > 0) {
          //     item.incomeOrExpendDetailDtos.forEach(income => {
          //       income.push({
          //         chargeItemGroupName:"总计",
          //         chargeItemGroupName:"总计",
          //         chargeItemGroupName:"总计",
          //         chargeItemGroupName:"总计",
          //         chargeItemGroupName:"总计",
          //       })
          //     })
          //   }
          // })
        }
      },
      setList(obj, type) {
        this.list.push({
          type: type,
          title: obj.title,
          list: obj.incomeOrExpendDetailDtos,
          tableDataTitle: this.tableDataTitle(type),
        });
      },
      // header上的提交
      submitTableCopy() {
        let planKey = this.$route.query.planKey ? this.$route.query.planKey : '';
        Api.submitTableCopy({ primaryKey: planKey }).then(res => {
          if (res.success) {
            this.getList();
          }
        });
      },
      //表头
      tableDataTitle(type) {
        let align = 'center';
        let width = false;
        let typeName = type == 'income' ? '收入' : '支出';
        let planRevenueChangeArr = [
          {
            prop: 'chargeItemGroupName',
            label: typeName + '类型',
            width: '180px',
            align,
          },
          {
            prop: 'thisYearPlanIncome',
            label: '年计划' + typeName,
            width: '180px',
            align,
          },
          {
            prop: 'compareLastYearPlanIncome',
            label: '比去年计划' + typeName,
            width,
            align,
          },
          {
            prop: 'compareLastYearPlanIncomeRatio',
            label: '同比',
            width,
            align,
          },
          {
            prop: 'compareLastYearRealityIncome',
            label: '比去年执行' + typeName,
            width,
            align,
          },
          {
            prop: 'compareLastYearRealityIncomeRatio',
            label: '同比',
            width,
            align,
          },
        ];
        return planRevenueChangeArr;
      },
      //颜色
      getColor(type,condition){
        let color = ''
        if (type == 'income') {
          color = condition ? "color-green" : "color-red"
        } else if (type == 'expend') {
          color = !condition ? "color-green" : "color-red"
        }
        return color
      }
    },
    filters: {
      percentageFilter(num) {
        return Math.abs(num) + '%';
      },
    },

    computed: {
      planDetail() {
        return this.$store.state.planDetail;
      },
    },
    watch: {
      planDetail: {
        handler(val) {
          this.getList();
        },
        deep: true,
      },
    },
  };
</script>
<style lang="scss" scoped>
  .btn-submit {
    position: fixed;
    top: 14px;
    right: 310px;
    z-index: 9999;
  }
  .padding-sp {
    padding: 0 30px 30px 30px;
  }
  .title {
    height: 50px;
    line-height: 50px;
    font-weight: 600;
    font-size: 16px;
  }
  .clolor-red {
    color: #ff0000;
  }
  .clolor-blue {
    color: #29c37f;
  }
</style>
